<template>
  <view class="viewport">
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <view class="signs">
        <view class="sign-item" v-for="(signItem, signIndex) in signList" :key="signIndex"
          @tap="toSignDetails(signItem.parentId, signIndex)">
          <image class="sign-icon" :src="signItem.imgUrl" mode="heightFix" />
          <view class="sign-title">
            {{ signItem.name!.length >= 8 ? signItem.name?.substring(0, 8) + '...' : signItem.name }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

</template>

<script lang="ts" setup>
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { ref, reactive, computed } from 'vue'
  import { useSignsStore } from '@/stores/modules/signs_store'
  import type { SignVo } from '@/api/base/types';
  const signsStore = useSignsStore()
  // 题库类型
  const baseType = ref<string>()
  // 标志父级ID
  const signParentId = ref<number>()
  // 标志列表
  const signList = ref<SignVo[]>([])

  onLoad((options: any) => {
    baseType.value = options.baseType
    signParentId.value = options.signParentId
    let signsParent = signsStore.signs?.find(item => item.id == signParentId.value)
    let pageTitle = signsParent?.name
    uni.setNavigationBarTitle({
      title: pageTitle!,
    })
    signList.value = signsParent?.children!
  })

  onShow(() => {
  })
  // 去标志详情
  const toSignDetails = (signParentId: number | undefined, singIndex: number) => {
    uni.navigateTo({
      url: `/pagesSign/signDetails/signDetails?baseType=${baseType.value}&signParentId=${signParentId}&signIndex=${singIndex}`
    })
  }

</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;

  }

  .viewport {
    display: flex;
    flex-direction: column;
    padding: 25rpx;
    background-color: #f5f5f5;
  }

  .scroll-view {
    display: flex;
    flex-direction: column;
  }

  .signs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    .sign-item {
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
      margin-bottom: 25rpx;
      width: 335rpx;
      height: 410rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .sign-icon {
        height: 220rpx;
        margin-bottom: 12%;
      }

      .sign-title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100rpx;
        padding: 0 10rpx;
        border-top: 2rpx solid #f5f5f5;
        font-size: 32rpx;
        color: #161616;

      }

      .sign-button-num {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 198rpx;
        height: 45rpx;
        font-size: 22rpx;
        color: #161616;

        border-radius: 23rpx;
        border: solid 2rpx #202020;
      }

    }
  }

</style>
